<template>
    <div>
        <el-row>
            <el-table :data="list" border>
                <el-table-column prop="adminid" label="管理员编号" width="180"></el-table-column>
                <el-table-column prop="adminname" label="管理员名称" width="180"></el-table-column>
                <el-table-column prop="role" label="管理员等级" width="180"></el-table-column>
                <el-table-column prop="checkedKeys" label="管理员访问权限" width="180">
                    <template v-slot="{row}">
                        <p v-for="item in row.checkedKeys" :key="item">
                            {{ item }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="checkedKeys" label="管理员访问权限" width="180">
                    <template  v-slot="{row}">
                        <el-button v-authority:disabled="['superAdmin']" @click="delHandler(row.adminid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    import { getAdminListAPI,delAdminAPI } from '@/api/admin';

    export default {
        name:"AdminListView",
        data(){
            return {
                list:[],
            }
        },
        methods:{
            async getAdminList(){
                try{
                    var res = await getAdminListAPI();
                    console.log("管理员列表",res);
                    this.list = res.data;
                }catch(err){
                    this.$message.error(err.message);
                }
            },
            async delHandler(adminid){
                console.log("删除管理员",adminid);
                try{
                    var res = await delAdminAPI({adminid});
                    console.log("管理员结果",res);
                    var index = this.list.findIndex(item=>item.adminid == adminid);
                    this.list.splice(index,1);
                    this.$message.success("删除成功");
                }catch(err){
                    this.$message.error(err.message);
                }
            }
        },
        mounted(){
            this.getAdminList();
        }
    }
</script>

<style lang="scss" scoped>

</style>